<template>
	<!--<view class="content">
		 <view style="background-color: #fff;padding: 12rpx;border-radius: 12rpx;">
			基本信息
		<view class="main-content">
			<view class="select-header">
				<view class="title">
					调拨类型：
				</view>
				<view class="main-select">
					<uni-data-select v-model="createForm.transType" :localdata="transTypeList" @change="transTypeSelect"
						placeholder="请选择调拨类型"></uni-data-select>
				</view>
			</view>
			<view class="select-header">
				<view class="title">
					调拨仓库：
				</view>
				<view class="main-select">
					<uni-data-select v-model="createForm.start_warehouse_id" :localdata="wareHouseList"
						@change="transTypeSelect" placeholder="请选择调拨仓库"></uni-data-select>
				</view>

			</view>
			<view class="select-header">
				<view class="title">
					调入仓库：
				</view>
				<view class="main-select">
					<uni-data-select v-model="createForm.end_warehouse_id" :localdata="wareHouseList"
						@change="transTypeSelect" placeholder="请选择调入仓库"></uni-data-select>
				</view>

			</view>
			<view class="select-header">
				<view class="title">
					备注：
				</view>
				<view class="main-select">
					<up-input placeholder="请输入备注" border="surround" v-model="createForm.remark"></up-input>
				</view>
			</view>
		</view>
		<view class="fixed-button">
			<up-button type="primary" size="large" text="下一步" @click="toStoreDetail"></up-button>
		</view>
		</view> 

	</view>-->
	<!-- <up-picker :show="typeShow" :columns="typeColumns" keyName="label" @cancel="typeShow=false"></up-picker> -->

	<!-- <up-popup v-model:show="nextShow" mode="bottom" :round="10" :customStyle="{height: '95vh',padding: '36rpx'}">
		<view class="card">
			<view class="main-header">
				<view class="title">
					商品信息
				</view>
				<view class="addGoods" @click="toStoreDetail">
					添加商品
				</view>
			</view>
			<view class="goods-card">
				<view class="goods-title">
					<view style="flex:2">商品名</view>
					<view class="title-item">数量</view>
					<view class="title-item">单位</view>
					<view class="title-item">金额</view>
				</view>
				<view class="line"></view>
				<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
					<span>{{ item.name }}</span>
					<span>{{ item.num }}</span>
					<span>{{ item.unit }}</span>
					<span>{{ item.amount }}</span>
				</view>
				<view class="line"></view>
				<view class="footer">
					<span>商品总数：{{goodsList.length}}</span>
					<span>总计金额：484</span>
				</view>
			</view>
		</view>
		<view class="fixed-button">
			<view style="flex:1">
				<up-button :plain="true" size="large" text="上一步" @click="nextShow = false"></up-button>
			</view>
			<view style="flex: 2;">
				<up-button type="primary" size="large" text="提交" @click="toStoreDetail"></up-button>
			</view>
		</view>
	</up-popup> -->
	<up-picker :show="typeShow" :columns="typeColumns" title="选择调拨方式" keyName="label" @cancel="toHome"
		@confirm="chooseHouse"></up-picker>
	<up-picker :show="wareHouse" :columns="mainWareList" title="选择调拨仓库" keyName="label" cancelText="上一步"
		@cancel="cancelStartHouse" @confirm="chooseNextHouse"></up-picker>
	<up-picker :show="nextHouse" :columns="moveWareList" title="选择调入仓库" keyName="label" cancelText="上一步"
		@cancel="cancelEndHouse" @confirm="toPage"></up-picker>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { route } from '@/uni_modules/uview-plus'
	import { getWarehouseApi } from '@/package_saleman/api/Home'
	const toHome = () => {
		uni.reLaunch({
			url:'/pages/Workbench/index'
		})
	}
	const wareHouseList = ref({});
	
	//调拨仓列表
	const mainWareList = ref({})
	//调入仓列表
	const moveWareList = ref({})

	const getWarehouse = async (index : number, id ?: any) => {
		try {
			const res = await getWarehouseApi(id);
			mainWareList.value = [res.data.filter(item => item.warehouse_type === index).map(item => {
				return {
					label: item.name,
					value: item.id
				}
			})]
			moveWareList.value = [res.data.filter(item => item.warehouse_type === (index === 2 ? 1 : 2)).map(item => {
				return {
					label: item.name,
					value: item.id
				}
			})]
		} catch (error) {
			console.error('获取仓库列表失败:', error);
		}
	}
	getWarehouse(1)
	//弹出框
	const typeShow = ref(true)
	const wareHouse = ref(false)
	const nextHouse = ref(false)
	//提交数据
	const createForm = reactive({
		transType: '',
		start_warehouse_id: '',
		end_warehouse_id: ''
	})
	const typeColumns = reactive([
		[
			{
				label: '车销提货',
				value: 1
			},
			{
				label: '车销回库',
				value: 2
			}
		]
	]);
	//确认方式选择调拨仓
	const chooseHouse = (e) => {
		getWarehouse(e.value[0].value)
		createForm.transType = e.value[0].value
		// console.log(e.value[0].value,typeColumns,mainWareList.value, moveWareList.value, '0312')
		typeShow.value = false
		wareHouse.value = true
	}
	//返回上一步确认方式
	const cancelStartHouse = () => {
		wareHouse.value = false
		typeShow.value = true
	}
	//选择调入仓
	const chooseNextHouse = (e) => {
		createForm.start_warehouse_id = e.value[0].value
		wareHouse.value = false
		nextHouse.value = true
	}
	//返回选择调拨仓
	const cancelEndHouse = () => {
		nextHouse.value = false
		wareHouse.value = true
	}
	
	const toPage = (e) => {
		createForm.end_warehouse_id = e.value[0].value
		const url = 'package_saleman/pages/transfer/transDetail'
		route({
			url: url,
			params: {
				start_warehouse_id: createForm.start_warehouse_id,
				end_warehouse_id: createForm.end_warehouse_id,
				transfer_type: createForm.transType
			}
		})
		console.log(createForm, 'xua')
	}
	// const wareHouseList = ref({});
	// const getWarehouse = async (id ?: any) => {
	// 	try {
	// 		const res = await getWarehouseApi(id);
	// 		wareHouseList.value = res.data.map(item => {
	// 			return {
	// 				...item,
	// 				value: item.id,
	// 				text: item.name
	// 			};
	// 		});
	// 	} catch (error) {
	// 		console.error('获取仓库列表失败:', error);
	// 	}
	// };
	// getWarehouse()
	// const typeShow = ref(false);
	// const typeColumns = reactive([
	// 	[
	// 		{
	// 			label: '车销提货',
	// 			id: 1
	// 		},
	// 		{
	// 			label: '车销回库',
	// 			id: 2
	// 		}
	// 	]
	// ]);
	// const toDetail = () => {
	// 	route({
	// 		url: '/package_saleman/pages/transfer/detail'
	// 	})
	// }
	// const toStoreDetail = () => {
	// 	// const url = createForm.transType === 2 ? 'package_saleman/carpinPages/Order/sales' : 'package_saleman/pages/transfer/transDetail'
	// 	const url = 'package_saleman/pages/transfer/transDetail'
	// 	route({
	// 		url: url,
	// 		params: {
	// 			// store_id,
	// 			// warehouse_id,
	// 			// warehouse_type,
	// 			start_warehouse_id:createForm.start_warehouse_id,
	// 			end_warehouse_id: createForm.end_warehouse_id,
	// 			transfer_type: createForm.transType
	// 		}
	// 	})
	// }
	// const toAdd = () => {
	// 	route({
	// 		url: 'package_saleman/pages/AddGoods/index'
	// 	})
	// }
	// const goodsList = [{
	// 	name: '康师傅方便面',
	// 	num: 4,
	// 	unit: '瓶',
	// 	amount: 121
	// }, {
	// 	name: '康师傅方便面',
	// 	num: 4,
	// 	unit: '瓶',
	// 	amount: 121
	// }, {
	// 	name: '康师傅方便面',
	// 	num: 4,
	// 	unit: '瓶',
	// 	amount: 121
	// }, {
	// 	name: '康师傅方便面',
	// 	num: 4,
	// 	unit: '瓶',
	// 	amount: 121
	// }]
	// const nextShow = ref(false)
	// const createForm = reactive({
	// 	transType: '',
	// 	start_warehouse_id: '',
	// 	end_warehouse_id: '',
	// 	remark: ''
	// })
	// const transTypeList = ref([
	// 	{
	// 		value: 1,
	// 		text: '车销提货'
	// 	},
	// 	{
	// 		value: 2,
	// 		text: '车销回库'
	// 	}
	// 	// ,
	// 	// {
	// 	// 	value: '3',
	// 	// 	text: '自提出库'
	// 	// },
	// 	// {
	// 	// 	value: '4',
	// 	// 	text: '访单回库'
	// 	// }
	// ])

	// 方法
	// const transTypeSelect = (item) => {
	// 	console.log(createForm);
	// };
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx;
		background: #f0f0f0;

		.main-content {
			display: flex;
			flex-direction: column;
			gap: 16rpx;
			padding: 12rpx;

			.select-header {
				display: flex;
				align-items: center;

				.title {
					display: flex;
					flex: 1;
				}

				.main-select {
					display: flex;
					flex: 2;
					border-radius: 6rpx;
					background-color: rgba(242, 243, 245, 1);
				}
			}
		}

		.fixed-button {
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 40rpx);
			padding: 20rpx;
			box-sizing: border-box;
			text-align: center;
		}
	}

	.card {
		display: flex;
		flex-direction: column;
		padding: 12rpx;

		.main-header {
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(1, 11, 31, 1);
			}

			.addGoods {
				color: rgba(15, 127, 255, 1);
			}
		}

		.goods-card {
			width: 100%;
			margin: 20rpx 0;
			padding: 24rpx;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.05);
			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
			gap: 30rpx;
			color: rgba(100, 101, 102, 1);
		}

		.goods-title {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
		}

		.title-item {
			flex: 1;
			text-align: center;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background-color: #ccc;
			margin: 10rpx 0;
		}

		.goods-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
		}

		.goods-item span {
			flex: 1;
			text-align: center;
		}

		.footer {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 10rpx;
		}
	}

	.fixed-button {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 40rpx);
		padding: 20rpx;
		box-sizing: border-box;
		text-align: center;
		display: flex;
		/* 使用 flex 布局 */
		gap: 20rpx;
		/* 设置按钮之间的间距 */
	}
</style>